import { Form, Modal, Select, SelectProps} from 'antd'
import { useAppSelector } from '../../../hooks/store'
import { CreateFavoritePictureRequest } from '../../../api/favorite-picture'
interface FovoritePictureFormModalProps<T> {
    id:number;
    open: boolean;
    title:string;
    onOK: (values: T) => void;
    onCancel: () => void;
    okText?: string;
    initialValues?: Partial<T>
}
const FovoritePictureFormModal = <T extends CreateFavoritePictureRequest>({
    id,
    open,
    title,
    onOK: onCreate,
    onCancel,
    okText = '确认',
    initialValues
}: FovoritePictureFormModalProps<T>): JSX.Element => {
    const [form] = Form.useForm<T>()
    const favoriteState = useAppSelector((state) => state.favorite)

    const selectOptions: SelectProps['options'] = favoriteState.list.map((c) => ({
        label: c.name,
        value: c.id
    }))

    return (
        <>
            <Modal
                destroyOnClose={true}
                open={open}
                title={title}
                okText={okText}
                cancelText='取消'
                onCancel={onCancel}

                onOk={() => {
                    form
                        .validateFields()
                        .then((values: T) => {
                            form.resetFields()
                            values.pictureId = id
                            onCreate(values)
                        })
                        .catch((info: unknown) => {
                            console.log('Validate Failed:', info)
                        })
                }}
            >
                <Form
                    form={form}
                    layout="vertical"
                    initialValues={initialValues}
                >
                    <Form.Item
                        name="favoriteId"
                        label='文件夹'
                    >
                        <Select
                            options={selectOptions}
                        />
                    </Form.Item>
                </Form>
            </Modal>
        </>

    )
}

export default FovoritePictureFormModal